<template>
  <div>
    <!-- 头 -->
    <myHeader></myHeader>
    <el-card class="box-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title" style="margin-left: -40px">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form :inline="true" :rules="rules" :model="form">
          <el-form-item label="城市" prop="city">
            <el-input v-model="form.city"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="houseSite">
            <el-input v-model="form.houseSite"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item label="卧室">
            <el-input v-model="form.bedroom" placeholder="卧室数量"></el-input>
          </el-form-item>
          <el-form-item label="客厅" style="margin-left: 29px">
            <el-input v-model="form.living" placeholder="客厅数量"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item label="厨房">
            <el-input v-model="form.kitchen" placeholder="厨房数量"></el-input>
          </el-form-item>
          <el-form-item label="卫生间" style="margin-left: 15px">
            <el-input v-model="form.toilet" placeholder="卫生间数量"></el-input>
          </el-form-item>
          <el-form-item label="面积">
            <el-input v-model="form.area" placeholder="面积"></el-input>
          </el-form-item>
        </el-form>
        <el-form :inline="true">
          <el-form-item label="层数">
            <el-input v-model="form.floor" placeholder="层数"></el-input>
          </el-form-item>
          <el-form-item label="所有楼层数">
            <el-input
              v-model="form.allfloor"
              placeholder="所在楼栋的总层数"
            ></el-input>
          </el-form-item>
          <el-form-item label="有无电梯">
            <el-radio-group v-model="form.elevator">
              <el-radio label="true">有</el-radio>
              <el-radio label="false">无</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-form :inline="true" :rules="rules" :model="form">
          <el-form-item label="租金" prop="money">
            <el-input v-model="form.money"
              ><span slot="suffix" style="margin-right: 6px; font-size: 15px"
                >元/月</span
              ></el-input
            >
          </el-form-item>
          <el-form-item label="租赁方式" style="margin-left: 50px" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio label="1">合租</el-radio>
              <el-radio label="0">整租</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-col :span="6">
          <el-form-item label="租客人数" style="margin-left: -40px">
            <el-input v-model="form.sharedNum"
              ><span slot="suffix" style="margin-right: 6px; font-size: 15px"
                >/人</span
              ></el-input
            >
          </el-form-item>
        </el-col>
        <el-form-item></el-form-item>
        <el-form-item label="概述" style="margin-left: -40px">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="房屋图片" class="upimg" style="margin-left: -40px">
          <el-upload
            action="http://1.12.249.140:9090/file/houseimg"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            accept="image/*"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>

        <el-form-item>
          <el-button style="margin-left: 133px" @click="goback">取消</el-button>
          <!-- 发布成功后跳转至/personal -->
          <el-button type="primary" @click="save">发布</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
import myHeader from "../../components/myHeader.vue";

export default {
  components: {
    myHeader,
  },
  data() {
    return {
      form: { type: "" },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        city: [{ required: true, message: "请输入城市", trigger: "blur" }],
        houseSite: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        money: [{ required: true, message: "请输入租金", trigger: "blur" }],
        type: [
          { required: true, message: "请选择租赁方式", trigger: "change" },
        ],
        // shareNum: [
        //   { required: true, message: "请输入租客人数", trigger: "blur" },
        // ],
      },
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      //获取localStorage中保存的后台返回的用户信息
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(this.dialogImageUrl);
    },
    handleSuccess(res) {
      if (res.code === 200) {
        this.fileList.push(res.data);
      } else {
        this.$notify.error(res.msg);
      }
    },
    //取消，返回上一页
    goback() {
      this.$router.go(-1);
    },
    // 提交数据
    save() {
      this.form.ownerId = this.user.id;
      request.post("/house", this.form).then((res) => {
        if (res.code === 200) {
          request
            .post("/house/images/" + res.data.houseAccount, this.fileList)
            .then((resd) => {
              if (resd.code === 200) {
                this.$notify.success("发布成功");
                this.form = {};
                this.fileList = [];
                this.$router.push("/personal");
              } else {
                this.$notify.error("发布失败");
              }
            });
        }
      });
    },
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box-card {
  width: 620px;
  margin-left: 429px;
  margin-top: 40px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.el-card {
  padding: 50px 45px 20px;
}
.el-form-item__content {
  margin-left: 210px;
}
</style>